<template>
	<view class="content font_family" v-if="goods">
		<view class="header_box">
			<view class="header f_j">
				<view class="left f_j">
					<view class="num">
						{{goods.score}}
					</view>
					<view class="star">
						<view class="text">
							共{{goods.comment_nums}}条评论
						</view>
						<u-rate count="5" allowHalf v-model="goods.score" size="26rpx" readonly></u-rate>
					</view>
				</view>
				<view class="line">

				</view>
				<view class="right f_j f_z_b">
					<view class="title text_ellipsis">
						{{goods.title}}
					</view>
					<image :src="goods.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 评论列表 -->
		<view class="pl_box">
			<view class="top_menu f_z_b">
				<view class="item f_d f_j" v-for="(item,index) in menu" :key="inde" @click="menu_check(index)">
					<view class="name">
						{{item.title}}
					</view>
					<view class="tag">
						{{count[index]}}
					</view>
					<view class="line" v-if="index==menu_index">

					</view>
				</view>
			</view>
			<view class="pl_item" v-for="(item,index) in list" :key="index">
				<view class="user f_z_b f_j">
					<view class="left f_j">
						<u-avatar size="72rpx" :src="item.avatar" mode='aspectFill'></u-avatar>
						<view class="msg">
							<view class="name">
								{{item.username}}
							</view>
							<u-rate count="5" v-model="item.score" allowHalf size="26rpx" readonly></u-rate>
						</view>
					</view>
					<view class="right">
						{{item.createtime}}
					</view>
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="img">
					<!-- <u-album multipleSize='200rpx' :urls="item.images"></u-album> -->
					<image v-for="(c_item,c_index) in item.images" :src="c_item" mode="aspectFill"
						@click="view_img(c_index,item.images)"></image>
					<video class="video" :src="item.attachfile"></video>
				</view>
				<view class="sj_hu" v-if="item.sj_hf">
					<view class="title">
						商家回复：
					</view>
					<view class="hu_text">
						{{item.sj_hf}}
					</view>
				</view>
				<view class="btn_box f_j f_z_b">
					<view class="item f_j" @click="pl_dz(item)">
						<image v-if="item.is_dz===0" src="../../static/public/dz.png" mode=""></image>
						<image v-else src="../../static/public/dz_t.png" mode=""></image>
						<text>{{item.dz_nums}}</text>
					</view>
					<view class="item f_j" @click="open(item.id,index)">
						<image src="../../static/public/pl.png" mode=""></image>
						<text>{{item.hf_nums}}</text>
					</view>
					<button class="item f_j" open-type="share" @click="share_btn(item)">
						<image src="../../static/public/zf.png" mode=""></image>
						<text>{{item.fx_nums}}</text>
					</button>
				</view>
			</view>
			<u-empty v-if="list.length==0" text='快来分享你的评论吧~' icon="/static/public/kong.png">
			</u-empty>
		</view>
		<!-- 评论弹出框 -->
		<u-popup round='40rpx' :show="comment_show" @close="close">
			<scroll-view class="comment_box" scroll-y="true" @scrolltolower='scrolltolower'>
				<comment v-for="(item,index) in hf_list" @user_reply='user_reply' :key="index" :msg='item'></comment>
				<view class="empty_top" v-if="hf_list.length==0">
					<u-empty text='快来分享你的评论吧~' icon="/static/public/kong.png">
					</u-empty>
				</view>
			</scroll-view>
			<!-- 回复框 -->
			<view class="bottom f_zj">
				<view class="ipt_box f_j">
					<image class="img" src="../../static/public/set.png" mode=""></image>
					<u--input :placeholder="placeholder" border="none" v-model="reply_data.content"
						@confirm="confirm"></u--input>
				</view>
			</view>
			<u-toast ref="uToast" position='top'></u-toast>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { goodsCommentList, likeComment } from '@/api/page.js'
	import { getReply, replyComment, shareComment } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['dl_id'])
		},
		data() {
			return {
				menu: [
					{ title: '全部', type: 0 },
					{ title: '有图·视频', type: 1 },
					{ title: '好评', type: 2 },
					{ title: '差评', type: 3 },
				],
				menu_index: 0,
				query_data: {
					dl: '',
					page: 1,
					good_id: '',
					type: 0
				},
				count: '',
				list: [],
				goods: '',
				more: 'loadmore',
				dz_query: {
					dl: '',
					comment_id: '',
					type: '',
				},

				// 回复pl数据
				hf_data: {
					dl: '',
					comment_id: '',
					page: 1
				},
				comment_show: false,
				hf_list: [],
				hf_more: 'loadmore',
				reply_data: {
					dl: '',
					comment_id: '',
					content: '',
					p_id: '',
				},
				placeholder: '文明用语',
				open_pl: '', //当前打开的评论index
				share_item: '',
			}
		},
		onLoad(e) {
			this.query_data.good_id = e.id
			this.query_data.dl = this.dl_id
			this.dz_query.dl = this.dl_id
			this.hf_data.dl = this.dl_id
			this.get_list()
		},
		onShareAppMessage() {
			this.share_pl()
			return {
				title: this.share_item.content,
				imageUrl: this.goods.image,
				path: `/pages/detail/detail?id=${this.query_data.good_id}`
			}
		},
		methods: {
			share_btn(item) {
				this.share_item = item
			},
			menu_check(index) {
				this.menu_index = index
				this.list = []
				this.query_data.page = 1
				this.query_data.type = index
				this.get_list()
			},
			// 获取评论列表
			get_list() {
				goodsCommentList(this.query_data).then(res => {
					if (res.code == 1) {
						this.count = res.data.count
						this.goods = res.data.good
						if (res.data.data.data.length > 0) {
							this.list = [...this.list, ...res.data.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			//点赞/取消
			pl_dz(item) {
				if (item.is_dz === 0) {
					this.dz_query.type = 1
				} else {
					this.dz_query.type = 2
				}
				this.dz_query.comment_id = item.id
				likeComment(this.dz_query).then(res => {
					if (res.code == 1) {
						if (this.dz_query.type == 1) {
							item.is_dz = 1
							item.dz_nums += 1
						} else {
							item.is_dz = 0
							item.dz_nums -= 1
						}
						console.log(item)
						this.$forceUpdate()
					}
				})
			},

			open(id, index) {
				this.open_pl = index
				this.hf_data.page = 1
				this.hf_list = []
				this.hf_data.comment_id = id
				this.comment_show = true
				this.reply_data.dl = this.dl_id
				this.reply_data.comment_id = id
				this.reply_data.p_id = id
				this.get_hf()
			},
			close() {
				this.hf_data.comment_id = ''
				this.comment_show = false
			},
			// 获取回复
			get_hf() {
				getReply(this.hf_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.hf_list = [...this.hf_list, ...res.data.data]
							this.hf_more = 'loadmore'
							this.hf_data.page += 1
						} else {
							this.hf_more = 'nomore'
						}
					}
				})
			},
			scrolltolower() {
				if (this.hf_more == 'loadmore') {
					this.get_hf()
				}
			},
			// 用户回复评论
			confirm() {
				if (!this.reply_data.content) {
					this.$refs.uToast.show({
						type: 'default',
						message: '请输入内容'
					})
					return
				}
				replyComment(this.reply_data).then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							message: res.msg
						})
						// 发表评论之后重置评论参数
						this.reply_data.content = ''
						this.reply_data.p_id = ''
						// 更新评论列表
						this.hf_list = []
						this.hf_data.page = 1
						this.get_hf()
						// 更新评论数
						this.list[this.open_pl].hf_nums += 1
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					}
				})
			},
			// 用户回复
			user_reply(data, type) {
				this.reply_data.p_id = data.id
				this.placeholder = '回复' + data.username
				// this.comment_show = true
			},
			// 分享评论
			share_pl() {
				let obj = {
					dl: this.dl_id,
					comment_id: this.share_item.id
				}
				shareComment(obj).then(res => {
					if (res.code == 1) {
						this.share_item.fx_nums += 1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.header_box {}

		.header {
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.left {
				.num {
					font-weight: 400;
					font-size: 64rpx;
					color: #FB3C0D;
				}

				.star {
					margin-left: 15rpx;

					.text {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin-bottom: 10rpx;
					}
				}
			}

			.line {
				margin: 0rpx 30rpx;
				height: 51rpx;
				border-left: 1rpx solid #D8D8D8;
			}

			.right {
				flex: 1;

				.title {
					width: 220rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				image {
					width: 72rpx;
					height: 72rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
		}

		.pl_box {
			margin-top: 30rpx;
			min-height: 90vh;
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.top_menu {
				.item {
					position: relative;

					.name {
						font-weight: 400;
						font-size: 32rpx;
						color: #000000;
					}

					.tag {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FB3C0D;
					}

					.line {
						width: 38rpx;
						height: 10rpx;
						background: linear-gradient(325deg, #FF3456 0%, #FF9EAE 100%);
						border-radius: 7rpx 7rpx 0rpx 0rpx;
						margin-top: 10rpx;
					}
				}
			}

			.pl_item {
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F6F6F6;

				.user {
					.left {
						.msg {
							margin-left: 15rpx;

							.name {
								font-weight: 400;
								font-size: 28rpx;
								color: #232323;
								margin-bottom: 10rpx;
							}
						}
					}

					.right {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.text {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #232323;
				}

				.img {
					margin-top: 20rpx;

					image {
						width: 190rpx;
						height: 190rpx;
						margin-right: 15rpx;
						margin-bottom: 15rpx;
						border-radius: 8rpx;
					}

					.video {
						width: 190rpx;
						height: 190rpx;
						margin-right: 15rpx;
						margin-bottom: 15rpx;
						border-radius: 8rpx;
					}

					::v-deep .u-album__row__wrapper {
						border-radius: 10rpx;
						overflow: hidden;
					}
				}

				.sj_hu {
					margin-top: 20rpx;
					padding: 20rpx;
					background: #F6F6F6;
					border-radius: 16rpx 16rpx 16rpx 16rpx;

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
					}

					.hu_text {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}

				}

				.btn_box {
					margin-top: 20rpx;

					.item {
						image {
							width: 38rpx;
							height: 38rpx;
						}

						text {
							margin-left: 10rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
						}
					}

					button {
						margin: 0rpx;
						padding: 0rpx;
						background: none;
					}

					button::after {
						border: none;
					}
				}
			}
		}

		.comment_box {
			width: 100%;
			height: 696rpx;
			padding: 56rpx 36rpx;
			padding-bottom: 0rpx;
			box-sizing: border-box;
		}

		.bottom {
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			// padding-bottom: calc(20rpx + env(safe-area-inset-bottom) /2);

			.ipt_box {
				padding: 8rpx 20rpx;
				width: 616rpx;
				height: 54rpx;
				background: #F8F9FC;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				box-sizing: border-box;

				.img {
					width: 26rpx;
					height: 22rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>